"use client";
import Link from "next/link";
import { useState } from 'react';
import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline';
import Logo from "@/components/logo/Logo";
import Footer from '@/components/Footer';
import WeChatShareProvider from "@/components/WeChatShareProvider";

export default function SubmitProduct() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  return (
    <div className="bg-slate-50 text-slate-700 min-h-screen font-sans">
      <WeChatShareProvider 
        title="分享你的AI产品 - AI产品之家"
        description="让更多人发现你的创造。在AI产品之家分享你的AI产品，经审核后将会出现在我们的网站上，获得更多曝光和用户关注。"
        imageUrl="/logo.png"
      />
      {/* Navbar */}
      <nav className="bg-white/90 backdrop-blur-lg shadow-sm sticky top-0 z-50">
        <div className="container mx-auto px-6 py-4">
          <div className="flex items-center justify-between">
            <Logo />
            <div className="hidden md:flex items-center space-x-8">
              <Link href="/" className="text-slate-600 hover:text-blue-600 font-medium">首页</Link>
              <Link href="/discover" className="text-slate-600 hover:text-blue-600 font-medium">发现</Link>
              <Link href="/products" className="text-slate-600 hover:text-blue-600 font-medium">产品</Link>
              <Link href="/cases" className="text-slate-600 hover:text-blue-600 font-medium">攻略</Link>
            </div>
            <div className="flex items-center space-x-4">
              <a href="/submit-product" className="hidden md:block bg-blue-600 text-white py-2 px-5 rounded-lg hover:bg-blue-700 font-semibold">发布产品</a>
              <button
                onClick={() => setIsMenuOpen(!isMenuOpen)}
                className="md:hidden text-slate-600 focus:outline-none"
              >
                {isMenuOpen ? (
                  <XMarkIcon className="w-6 h-6" />
                ) : (
                  <Bars3Icon className="w-6 h-6" />
                )}
              </button>
            </div>
          </div>
          {/* Mobile Menu */}
          <div className={`${isMenuOpen ? 'block' : 'hidden'} md:hidden mt-4`}>
            <Link href="/" className="block py-2 px-4 text-sm text-slate-600 hover:bg-slate-100 rounded-md">首页</Link>
            <Link href="/discover" className="block py-2 px-4 text-sm text-slate-600 hover:bg-slate-100 rounded-md">发现</Link>
            <Link href="/products" className="block py-2 px-4 text-sm text-slate-600 hover:bg-slate-100 rounded-md">产品</Link>
            <Link href="/cases" className="block py-2 px-4 text-sm text-slate-600 hover:bg-slate-100 rounded-md">攻略</Link>
            <a href="/submit-product" className="block mt-2 bg-blue-600 text-white py-2 px-4 rounded-lg text-center font-bold">发布产品</a>
          </div>
        </div>
      </nav>
      {/* Page Header */}
      <header className="bg-white border-b border-slate-200">
        <div className="container mx-auto px-6 py-10">
          <h1 className="text-4xl font-bold text-slate-900">分享你的 AI 产品</h1>
          <p className="mt-2 text-slate-600">让更多人发现你的创造。提交的产品经审核后将会出现在我们的网站上。</p>
        </div>
      </header>
      <main className="container mx-auto px-6 py-12">
        <div className="max-w-3xl mx-auto">
          <div className="bg-white p-8 rounded-xl shadow-md">
            <form action="#" method="POST" className="space-y-6">
              {/* Form fields */}
            </form>
          </div>
        </div>
      </main>
      {/* Footer */}
      <Footer />
    </div>
  );
} 